<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <link th:href="@{/back/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/layer.js}"></script>


</head>
<div th:replace="client/header::header(${article.title},null,null)"></div>
<body>
<article class="main-content post-page">
    <div class="post-header">
        <h1 class="title-article" itemprop="name headline" th:text="${article.title}"></h1>
        <div style="margin-top: 15px;">
            <div th:if="${article.tags}!=''" style="font-size: 18px;color: green;">

                文章标签: <span th:value="${article.tags}" id="Viewtags"></span>
            </div>
            <div class="post-data" style="margin-top: 10px; color: #8D8D8D;">
                <time th:datetime="${commons.dateFormat(article.created)}" itemprop="datePublished" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"></time>
                <time th:datetime="${commons.dateFormat(article.modified)}" itemprop="datePublished" th:text="' || 最近修改 '+ ${commons.dateFormat(article.modified)}"></time>

                 &nbsp;||&nbsp;
                <th:block th:text="${article.hits}"/> 浏览 &nbsp;||&nbsp; <th:block th:text="${article.comments_num}"/> 回复
            </div>

        </div>
<!--        //展示头像和昵称-->
        <div style="margin-top: 30px;color: blue;" th:if="${article.username}">
            <img class="avatar" th:src="@{${'/article/avatar/'+article.username}}" width="32" height="32" onerror="javascript:this.src='/assets/img/me.jpg';"/>
            <th:block th:text="${article.username}"/>
        </div>

    </div>
    <br /><hr />
    <div id="post-content" class="post-content content" th:utext="${commons.article(article.content)}"></div>
</article>
<div th:replace="client/comments::pageNav(${comments},${isDele})"></div>
<div th:replace="client/footer::footer"></div>
<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function(){
        var imgurl=$(this).attr('src');
        var w=this.width*2;
        var h=this.height*2+50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w+"px", h+"px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
                    '\<\img style="width:'+(w-50)+'px;" src='+imgurl+'\>\<\/div>'
        });
    });

    //标签展示
    $(function(){

        var ta = $("#Viewtags");
        var s = ta.attr("value")+"";


        var slist = s.split(",");
        var res='';
        for(var i=0;i<slist.length;i++){
            res+='<a class="btn btn-success disabled" style="margin-left: 5px;height: 30px;">'+slist[i]+'</a>';
        }
        ta.html(res);
    });
    //标签分离


</script>
<script th:src="@{/back/js/bootstrap.js}"></script>
</body>
</html>